<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style >
  table{
    width: 500px;
    margin: 20px auto;
  }
  td{
    text-align: center;
  }
  form{
    width: 500px;
    margin: 20px auto;
  }
  form div{
  margin-top: 20px;
  }
</style>
<body>
  <div id="app">
    <table border>
            <thead>
              <tr>
                <th>编号</th>
                <th>科目</th>
                <th>成绩</th>
                <th>考试时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in scroeList" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.subject}}</td>
                <td>{{item.score}}</td>
                <td>{{item.time}}</td>
                <td>
                 <a href="javasript:void()" @click="toDel(item.id)">删除</a>
               </td>
              </tr>
            </tbody>
            
            <!-- 脚步布局 -->
             <tr>
              <td colspan="5">
                总分：{{total}} &nbsp;&nbsp;&nbsp; 平均分：{{avg}}
              </td>
             
             </tr>

    </table>
    <div>
      <form @submit.prevent="return false">
        <div>
           <label>科目:</label>  <input type="text" v-model="subject">
         </div>
         <div>
           <label>分数:</label>  <input type="text" v-model.number="score">
         </div>
         <div>
          <!-- class src herf id style 等 -->
          <button :style="btnStyle" @click="toAdd">添加</button>
         </div>
      </form>
    </div>
  </div>

   <script src="./vue.js"></script>
    <script>
      new Vue({
        el:"#app",
        data(){
          return {
            subject:"",//用来收集科目
            score:"",//用来收集成绩
             btnStyle:{
              color:"white",
              backgroundColor:"blue"
             },
             scroeList:[ //成绩列表数据
              {id:1,subject:"语文",score: 60,time:"2025/8/1"},
              {id:2,subject:"数学",score:70,time:"2025/9/1"},
              {id:3,subject:"英语",score:80,time:"2025/10/1"},
             ]
          }
        },
        methods:{
          toAdd(){ //点击添加成绩
            let subObj={// 生成一份成绩数据
               id:new Date().getTime(),//时间戳代替id,
               subject:this.subject,// 收集 科目输入框的值
               score:this.score,  // 收集  分数输入框的值
               time:new Date().toLocaleDateString()//时间
            }
              // 将生成的一份数据 添加到列表数据scroeList中
              this.scroeList.push(subObj)
              // 清空输入框的值
              this.subject=""
              this.score=""
          },
          toDel(id){ //删除方法
              //  根据id 在scoreList数组中找到对应数据删除掉
              this.scroeList.forEach((item,index)=>{
                if(item.id==id){
                  // 根据下标删除这一项
                  this.scroeList.splice(index,1)
                }
              })
          }
        },
        computed:{
          total(){ //计算总分
             let sum=0;
             this.scroeList.forEach(item=>{
               sum+=item.score //将数组每一项成绩相加
             })
             return sum
          },
          // 平均分 
          avg(){
             return  this.total/this.scroeList.length
          }
        }
      })
    </script>
</body>
</html>